<template>
    <!-- 平台源表数据源 -->
    <div id="platformSourceTable" class="app-container">
      <header id="header">
         <p>平台源表数据源</p>
         <a-input-group compact>
            <a-select :default-value="leftValue" class="search-select"  @change="changeBtn">
               <a-select-option
                  v-for="(item, index) in optionSelect"
                  :key="index"
                  :value="item.value">
               {{ item.label }}
               </a-select-option>
            </a-select>
            <a-input style="width: 45%" v-model="rightValue" />
            <a-button @click="searchBtn" type="primary">
               搜索
            </a-button>
         </a-input-group>
      </header>

      <main id="main">
         <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            bordered
            :rowKey="(record, index) => {return index;}"
            size="small">
            <template slot="tableAlias" slot-scope="text, record, index">
               <span  @click="handleEdit(record)" style="color:rgb(64, 158, 255);cursor:pointer">{{ text }}</span>
            </template>
            <template slot="serial" slot-scope="text, record, index">
               <span>{{ index + 1 }}</span>
            </template>
            <template slot="action" slot-scope="text, record">
               <a-button @click="handleEdit(record)" type="link">预览</a-button>
            </template>
         </a-table>
      </main>

      <footer id="footer">
         <a-config-provider :locale="zh_CN">
            <a-pagination
               show-size-changer
               v-model="current"
               :page-size="pageSize"
               :total="total"
               show-quick-jumper
               @change="onChange"
               @showSizeChange="onShowSizeChange"
               :show-total="total => `总数据 ${total} 条`"/>
         </a-config-provider>
      </footer>

      <a-modal
         title="预览"
         :visible="visible"
         @cancel="handleCancel"
         :destroyOnClose="true"
         width="90%"
         :zIndex="100"
         id="handleCancel">
         <preview :tableId="tableId" :accessType="accessType"></preview>
         <div slot="footer">
               <a-button type="primary" @click="handleCancel">关闭</a-button>
         </div>
      </a-modal>
   </div>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import {myDataList} from '@/api/dataManagement/system/mydata'
import preview from "./components/preview";
export default {
   components: {
      preview
   },
   data() {
      return {
         leftValue: 0, //搜索框左侧下拉选择
         rightValue: "", //搜索输入框的值
         zh_CN,
         visible: false,
         tabPaneKey: 1,
         total:0,
         current:1,
         pageSize:10,
         tableId:'',
         accessType:'',
         optionSelect: [
            {
               label: "表单名称(中英文)",
               value: 0
            },
            {
               label: "表单所属层",
               value: 1
            }
         ],
         // 表头
         columns: [
            {
               title: "序号",
               dataIndex: "serial",
               key: "serial",
               width:"5%",
               align: "center",
               scopedSlots: { customRender: "serial" }
            },
            {
               title: "表单名称",
               dataIndex: "tableAlias",
               key: "tableAlias",
               align: "center",
               scopedSlots: { customRender: "tableAlias" }
            },
            {
               title: "表单英文名称",
               dataIndex: "tableName",
               key: "tableName",
               align: "center",
               ellipsis: true
            },
            {
               title: "所属层",
               dataIndex: "dirPath",
               key: "dirPath",
               width: "20%",
               align: "center",
               ellipsis: true
            },
            {
               title: "表单简介",
               dataIndex: "comment",
               key: "comment",
               align: "center"
            },
            {
               title: "最新更新时间",
               dataIndex: "updateTime",
               key: "updateTime",
               align: "center",
               width:"12%"
            },
            {
               title: "操作",
               dataIndex: "action",
               key: "action",
               width:"5%",
               align: "center",
               scopedSlots: { customRender: "action" }
            }
         ],
         // 内容
         data: []
      };
   },

   mounted () {
   this.myDataListBtn()
   },
   methods: {
      changeBtn(item) {
         console.log(item);
         this.leftValue = item
      },

      //数据列表
      myDataListBtn(){
         let list = {
            pageNum:this.current,
            pageSize:this.pageSize
         }
         if(this.leftValue == 0) {
            list.tableName = this.rightValue
         }else {
            list.dirName = this.rightValue
         }

         myDataList(list).then(res=>{
         console.log('11')
            console.log(res)
            if(res.code === 200){
               this.total = res.total
               this.data = res.rows
            }
         })
      },

      //搜索
      searchBtn() {
         this.current = 1;
         this.myDataListBtn()
      },

      //预览
      handleEdit(record) {
         console.log(record);
         this.visible = true
         this.tableId = record.id
         this.accessType =  record.accessType
         // this.router
      },

      //跳转到某一页
      onChange(item) {
         this.current = item;
         this.myDataListBtn()
         console.log(item);
      },

      //改变条数
      onShowSizeChange(current, pageSize) {
         this.pageSize = pageSize;
         this.myDataListBtn()
      },

      //弹窗取消按钮
      handleCancel() {
         this.visible = false;
      }
   }
};
</script>

<style lang="scss" scoped>
#platformSourceTable {
    background: white;
    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        box-sizing: border-box;
        p {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0;
        }
        .ant-input-group {
            width: 30%;
            display: flex;
            justify-content: flex-end;
        }
    }
    .search-select{
        width:150px;
    }
    #footer {
        box-sizing: border-box;
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: flex-end;
    }
}
</style>

<style lang="scss">
#handleCancel {
    .ant-modal-wrap {
        z-index: 3333;
    }
    #handleCancelBody {
        display: flex;
        justify-content: space-between;
        #left {
            width: 20%;
            border-right: 1px solid #eaeaea;
            padding: 0 10px;
            .title {
                border-bottom: 1px solid #eaeaea;
                padding: 0.5rem 0;
                span {
                    display: block;
                    padding: 0.1rem 0.5rem;
                    border-left: 3px solid rgb(17, 131, 248);
                }
            }
            .entry {
                display: flex;
                align-items: center;
                span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                span:first-child {
                    display: inline-block;
                    width: 40%;
                }
                span:nth-child(2) {
                    display: inline-block;
                    width: 60%;
                }
            }
        }
        #right {
            border-left: 1px solid #eaeaea;
            width: 79%;
            box-sizing: border-box;
            padding: 0.5rem;
            .visibleFooter {
                box-sizing: border-box;
                padding: 0.5rem 1rem;
                margin-top: 0.5rem;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
   .ant-modal-body{
      padding:0;
   }
}
</style>
